<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>菜单修改</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/addActor.css">
  <script src="lib/js/jquery-1.12.4.js"></script>
  <script src="js/loginText.js"></script>

</head>

<body>
  <div class="myTable">
    <form  id="editCategory">
      <div class="form-group">
        <label for="exampleInputEmail1">旧菜单名称</label>
        <input type="text" class="form-control oldCategory" id="exampleInputEmail1" name="oldCategory" disabled>
      </div>
      <div class="form-group">
        <label for="actor">请选择父菜单名称</label>
        <select name="fatherCategory" id="fatherCategory" class="form-control mySelect" required="required">
          <!-- todo -->
        </select>
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">请修改菜单名称</label>
        <input type="text" class="form-control newCategory" id="exampleInputEmail1" name="newCategory">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">请修改url地址</label>
        <input type="text" class="form-control urlAddress" id="exampleInputEmail1" name="urlAddress">
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>

<!-- 下拉选择框渲染 -->
<script type="text/template" id="mySelectData">
  <% for(let i = 0; i < data.length; i++) { %>
  <option value="<%=data[i].father%>"><%=data[i].father%></option>
<% } %>
</script>
  <script>
    window.onload = function () {

      // 渲染下拉框
      getAllCategoryAndSunCategory(function (res) {
        console.log(res)
        $('.mySelect').html(template('mySelectData', {
          data: res
        }))
      })






      var urlData = decodeURIComponent(window.location.href)
      urlData = urlData.split('?')[1].split('=')[1]
      // 给旧按钮设置值
      $('.oldCategory')[0].value = urlData
      $('.newCategory')[0].value = urlData

      // 表单提交事件：
      $("#editCategory").submit(function (e) {
        e.preventDefault()
        var oldCategory = $('.oldCategory')[0].value.trim()
        var newCategory = $('.newCategory')[0].value.trim()
        var urlAddress = $('.urlAddress')[0].value.trim()
        var fatherCategory = $('#fatherCategory')[0].value
        console.log(oldCategory)
        console.log(newCategory)
        console.log(urlAddress)
        console.log(fatherCategory)


        if (!newCategory) {
          window.alert('菜单名不能为空')
          return
        }

        $.ajax({
          url: '/pages/category/editSunCategory',
          type: 'post',
          data: JSON.stringify({
            oldCategory,
            newCategory,
            urlAddress,
            fatherCategory
          }),
          dataType: 'json',
          contentType: 'application/json;charset=UTF-8',
          success: function (res) {
            if (res.success) {
              // 成功了页面就跳转
              self.location = 'category.html'
            } else if (res.error) {
              window.alert(res.error)
            }
          }
        })
      })
    }


     // 获取所有父菜单和子菜单。。。父菜单带子菜单函数封装
     function getAllCategoryAndSunCategory(callback) {
        $.ajax({
            url: '/pages/category/getAllCategoryAndSunCategory',
            type: 'post',
            data: '',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                callback && callback(res)
            }
        })
    }
  </script>

  <script src="lib/js/bootstrap.js"></script>
  <script src="lib/js/template-native.js"></script>



  <script src="lib/js/mock.js"></script>
  <script src="mock/editSunCategory.js"></script>
  <script src="mock/fatherAndSun.js"></script>
</body>

</html>